<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript DOM 操作完全指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4f46e5;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 代码块样式 */
        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            padding: 1.5rem;
            border-radius: 0.75rem;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        .code-block::before {
            content: '';
            position: absolute;
            top: 0.75rem;
            left: 1rem;
            width: 0.75rem;
            height: 0.75rem;
            background: #ef4444;
            border-radius: 50%;
            box-shadow: 1.25rem 0 0 #f59e0b, 2.5rem 0 0 #10b981;
        }
        
        /* 卡片悬停效果 */
        .feature-card {
            transition: all 0.3s ease;
            background: white;
            border-radius: 1rem;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 5px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        
        /* 高亮标记 */
        .highlight {
            background: linear-gradient(180deg, transparent 60%, #fef3c7 60%);
            padding: 0 0.25rem;
        }
        
        /* 章节标题装饰 */
        .section-title {
            position: relative;
            padding-left: 1.5rem;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0.375rem;
            height: 2rem;
            background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%);
            border-radius: 0.25rem;
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <section class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
            <div class="text-center animate-fadeInUp">
                <h1 class="text-5xl lg:text-7xl font-bold mb-6">
                    JavaScript <span class="text-yellow-300">DOM</span> 操作
                </h1>
                <p class="text-xl lg:text-2xl mb-8 text-indigo-100 max-w-3xl mx-auto">
                    掌握网页元素操控的核心技术，开启动态交互编程之旅
                </p>
                <div class="flex justify-center space-x-4">
                    <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-full px-6 py-3">
                        <i class="fas fa-code mr-2"></i>实战导向
                    </div>
                    <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-full px-6 py-3">
                        <i class="fas fa-rocket mr-2"></i>即学即用
                    </div>
                    <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-full px-6 py-3">
                        <i class="fas fa-lightbulb mr-2"></i>深入浅出
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#f5f7fa"/>
            </svg>
        </div>
    </section>

    <!-- 主要内容区 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        
        <!-- DOM 简介 -->
        <section class="mb-16 animate-fadeInUp">
            <div class="bg-white rounded-2xl shadow-xl p-8 lg:p-12">
                <h2 class="text-3xl font-bold mb-6 gradient-text">什么是 DOM？</h2>
                <p class="text-lg text-gray-700 mb-6 drop-cap">
                    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树状结构，这个树状结构让 JavaScript 获得了足够的能力来创建动态的 HTML。
                </p>
                
                <!-- DOM 树可视化 -->
                <div class="my-8 p-6 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-800">DOM 树结构</h3>
                    <div class="mermaid">
                        graph TD
                            A[document] --> B[html]
                            B --> C[head]
                            B --> D[body]
                            C --> E[title]
                            C --> F[meta]
                            D --> G[header]
                            D --> H[main]
                            D --> I[footer]
                            H --> J[div]
                            J --> K[p]
                            J --> L[img]
                            style A fill:#4f46e5,stroke:#333,stroke-width:2px,color:#fff
                            style B fill:#7c3aed,stroke:#333,stroke-width:2px,color:#fff
                            style C fill:#8b5cf6,stroke:#333,stroke-width:2px,color:#fff
                            style D fill:#8b5cf6,stroke:#333,stroke-width:2px,color:#fff
                    </div>
                </div>
                
                <!-- JavaScript 能力展示 -->
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
                    <div class="feature-card p-6 text-center">
                        <div class="text-4xl text-indigo-600 mb-3">
                            <i class="fas fa-edit"></i>
                        </div>
                        <h4 class="font-semibold mb-2">改变 HTML 元素</h4>
                        <p class="text-sm text-gray-600">动态修改页面内容</p>
                    </div>
                    <div class="feature-card p-6 text-center">
                        <div class="text-4xl text-purple-600 mb-3">
                            <i class="fas fa-palette"></i>
                        </div>
                        <h4 class="font-semibold mb-2">改变 HTML 属性</h4>
                        <p class="text-sm text-gray-600">调整元素属性值</p>
                    </div>
                    <div class="feature-card p-6 text-center">
                        <div class="text-4xl text-pink-600 mb-3">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <h4 class="font-semibold mb-2">改变 CSS 样式</h4>
                        <p class="text-sm text-gray-600">实时更新视觉效果</p>
                    </div>
                    <div class="feature-card p-6 text-center">
                        <div class="text-4xl text-indigo-600 mb-3">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <h4 class="font-semibold mb-2">响应页面事件</h4>
                        <p class="text-sm text-gray-600">处理用户交互行为</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 查找元素 -->
        <section class="mb-16 animate-fadeInUp">
            <div class="bg-white rounded-2xl shadow-xl p-8 lg:p-12">
                <h2 class="text-3xl font-bold mb-8 section-title">查找 DOM 元素</h2>
                
                <p class="text-lg text-gray-700 mb-8">
                    要操作 HTML 元素，首先需要找到它们。JavaScript 提供了多种查找元素的方法：
                </p>
                
                <div class="space-y-6">
                    <!-- 通过 ID 查找 -->
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <i class="fas fa-fingerprint text-blue-600 mr-3"></i>
                            通过 ID 查找
                        </h3>
                        <p class="text-gray-700 mb-4">最简单直接的查找方式，通过元素的唯一标识符定位</p>
                        <div class="code-block">
                            <pre><code>// 查找 id="intro" 的元素
var element = document.getElementById("intro");

// 如果找到元素，element 将包含该元素对象
// 如果未找到，element 将为 null</code></pre>
                        </div>
                    </div>
                    
                    <!-- 通过标签名查找 -->
                    <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-6">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <i class="fas fa-tags text-purple-600 mr-3"></i>
                            通过标签名查找
                        </h3>
                        <p class="text-gray-700 mb-4">查找所有指定标签类型的元素，返回元素集合</p>
                        <div class="code-block">
                            <pre><code>// 先找到容器元素
var container = document.getElementById("main");

// 在容器中查找所有 &lt;p&gt; 元素
var paragraphs = container.getElementsByTagName("p");</code></pre>
                        </div>
                    </div>
                    
                    <!-- 通过类名查找 -->
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <i class="fas fa-layer-group text-green-600 mr-3"></i>
                            通过类名查找
                        </h3>
                        <p class="text-gray-700 mb-4">根据 CSS 类名查找元素，适合批量操作</p>
                        <div class="code-block">
                            <pre><code>// 查找所有 class 包含 "highlight" 的元素
var elements = document.getElementsByClassName("highlight");</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 操作 HTML 内